<template>
  <!-- 当月车型使用率 -->
  <div class="monthCar">
    <div>
      <PublicTop :index="2" />
    </div>
    <div ref="mains" class="lin"></div>
    <div class="text">
      <div class="top">
        <div>当日最高使用率</div>
      </div>
      <div class="bom">
        <div class="model">
          {{ fieldObj.maxCarBrandModelDayRate.brandModelName || "" }}
        </div>
        <div class="right">
          <span>
            <animate-number
              from="0"
              :to="fieldObj.maxCarBrandModelDayRate.carBrandModelDayRate || 0"
              :key="fieldObj.maxCarBrandModelDayRate.carBrandModelDayRate || 0"
              class="number"
            /> </span
          >%
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PublicTop from "./../publicTop/index.vue";
import * as echarts from "echarts";
import { getGetCarBrandModelRentedRate } from "@/api/dataV/index";
import { mapState } from "vuex";
export default {
  name: "MonthCar",
  components: { PublicTop },
  data() {
    return {
      trme: null,
      // fieldObj: {},
      brandModelName: "",
      carBrandModelDayRate: 0,
      myChart: null,
      option: {
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },

          data: [],
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            rotate: 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 6, // 刻度标签与轴线之间的距离
            formatter: "{value}", // 刻度标签的内容格式器
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, //不显示坐标轴刻度线
          },
          axisLine: {
            show: false, //不显示坐标轴线
          },
          axisLabel: {
            show: false, //不显示坐标轴上的文字
          },
          splitLine: {
            //网格线
            show: false,
          },
        },
        series: [
          {
            data: [],
            type: "bar",
            barWidth: 13,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
            itemStyle: {
              normal: {
                //柱体的颜色
                //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // x1, y1, x2, y2 定义渐变方向
                  [
                    { offset: 0, color: "#E6A23C" },
                    { offset: 0.5, color: "#50E3C2" },
                    { offset: 1, color: "#74f0ff" },
                  ]
                ),
              },
            },
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      },
    };
  },
  watch: {
    "$store.state.fieldObj": {
      handler: function (o) {
        this.option = o;
      },
    },
  },
  beforeDestroy() {
    clearInterval(this.trme);
  },
  computed:{
    ...mapState(['fieldObj'])
  },
  mounted() {
    const store = this.$store.state.fieldObj;
    if (JSON.stringify(store) !== "{}") {
      this.fieldObj = store;
      this.brandModelName = store.maxCarBrandModelDayRate.brandModelName;
      this.carBrandModelDayRate =
        store.maxCarBrandModelDayRate.carBrandModelDayRate;
    } 
    this.myChart = echarts.init(this.$refs.mains);
    this.init();
  },
  methods: {
    init() {
      this.query();
    },
    query() {
      getGetCarBrandModelRentedRate().then((res) => {
        let data = [];
        let xAxis = [];
        res.map((v) => {
          data.push(v.y);
          xAxis.push(v.x);
        });
        this.option.xAxis.data = xAxis;
        this.option.series[0].data = data;
        this.myChart.setOption(this.option);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.monthCar {
  width: 100%;
  height: 100%;
  background: url(@/assets/datav/itembg.png) no-repeat;
  position: relative;
  .lin {
    width: 100%;
    height: 3.28rem;
  }
  .text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.8rem;
    background: rgba(0, 123, 255, 0.1);
    .top {
      color: rgb(30, 255, 255);
      font-size: 0.2rem;
      margin-left: 5%;
      padding-top: 3%;
    }
    .bom {
      display: flex;
      margin-top: 3%;
      margin-left: 5%;
      div {
        flex: 1;
      }
      .model {
        color: #fff;
        font-size: 0.2rem;
      }
      .right {
        color: rgb(30, 255, 255);
        font-size: 0.3rem;
      }
      // font-size: 30px;
      // color: rgb(30, 255, 255);
      // text-align: right;
      // margin-bottom: 1%;
      // margin-right: 1%;
      // span {
      //   font-size: 40px;
      //   color: #f27a24;
      // }
    }
  }
}
</style>
